<template>
  <div class="calculator-container">
    <el-table :data="tableData" stripe border style="width: 100%">
      <el-table-column label="销售额" prop="tableId" width="180"></el-table-column>
      <el-table-column label="数量" prop="qty" width="180"></el-table-column>
      <el-table-column label="倒计时" prop="countdownTime" width="180">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <div class="el-statistic" v-if="scope.row.countdownStatus === 2">
              <div class="el-statistic__head">剩余时间</div>
              <div  class="el-statistic__content">
                <span class="el-statistic__number">{{ dayjs(scope.row.countdownTimeTemp).subtract(8, 'hour').format("HH:mm:ss") }}</span>
              </div>
            </div>
            <el-countdown v-else title="剩余时间" :disabled="scope.row.countdownStatus === 2" :value="scope.row.countdownTime" />
          </div>
        </template>
      </el-table-column>
      <el-table-column label="倒计时状态" prop="countdownStatus" width="180">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <span style="margin-left: 10px">{{ status(scope.row.countdownStatus) }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="180">
        <template #default="scope">
          <el-button type="text" @click="updateStatus(scope.row, 1)">开始</el-button>
          <el-button type="text" @click="updateStatus(scope.row, 2)">暂停</el-button>
          <el-button type="text" @click="updateStatus(scope.row, 3)">结束</el-button>
<!--          <el-button type="text" @click="reset(scope.row.tableId, 15)">Reset</el-button>-->
        </template>
      </el-table-column>
    </el-table>

  </div>
</template>

<script setup>
import {ref, computed, reactive} from 'vue';
import dayjs from 'dayjs';
let statusMap = ref({
  1: '开始',
  2: '暂停',
  3: '结束'
})
const status = ((value) => {
  return statusMap.value[value];
})

let tableData = ref([
  {tableId: 10000, qty: 8000, countdownTime: null, countdownTimeTemp: null, countdownStatus: 1},
  {tableId: 20000, qty: 16000, countdownTime: null, countdownTimeTemp: null, countdownStatus: 2},
  {tableId: 30000, qty: 24000, countdownTime: null, countdownTimeTemp: null, countdownStatus: 3},
]);
tableData.value.forEach((item) => {
  item.countdownTime = ref(Date.now() + 1000 * 60 * 15);
  item.countdownTimeTemp = ref( 1000 * 60 * 15);
  if (item.countdownStatus === 3){
    item.countdownTime = ref(0);
    item.countdownTimeTemp = ref( 0);
  }
});
const updateStatus = (clickRow, countdownStatus)=>{
  const row = tableData.value.find((item) => item.tableId === clickRow.tableId)
  if (countdownStatus === 1){
    if (row.countdownStatus === 2){
      row.countdownTime = ref(row.countdownTimeTemp + Date.now());
    }else{
      row.countdownTime = ref(Date.now() + 1000 * 60 * 15);
    }
  }
  if (countdownStatus === 2){
    row.countdownTimeTemp = ref(row.countdownTime - Date.now());
  }
  if (countdownStatus === 3){
    row.countdownTime = ref(0);
  }
  row.countdownStatus = countdownStatus;
}

const reset = (tableId, countdownTime) =>{
  tableData.value.find((item) => item.tableId === tableId).countdownTime = Date.now() + 1000 * 60 * countdownTime;
}
let socket;

const connectWebSocket = () => {
  socket = new WebSocket('ws://localhost:8888/webSocketServer'); // 使用一个公共的WebSocket服务器作为示例

  socket.onopen = () => {
    console.log('WebSocket 已连接');
  };

  socket.onmessage = (event) => {
    console.log('WebSocket 收到消息: ', event.data);
    const data = JSON.parse(event.data);
    data.forEach((item) => {
        updateStatus(item, item.countdownStatus)
      if (item.countdownTime){
        reset(item.tableId, item.countdownTime)
        }
    });
  };

  socket.onclose = () => {
    console.log('WebSocket 已关闭');
  };

  socket.onerror = (error) => {
    console.error('WebSocket 出错: ', error);
  };
};
connectWebSocket();

</script>

<style scoped>

</style>
